<template>
  <div id="playlist">
    <div class="title">
      <div class="bigtitle">当前播放</div>
      <span class="total" v-show="songsdata.length">共{{listLength}}首</span>
      <span class="clear" @click="clear">清空列表</span>
    </div>
    <div class="songlist">
      <ul>
        <li
          v-for="(item, index) in songsdata"
          :style="setItem(index)"
          :key="index"
          @dblclick="play(index)"
        >
          <span>{{ item.name }}</span>
          <span>{{ item.ar[0].name }}</span>
          <span>{{ item.dt }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import formatSeconds from "../js/time";
export default {
  name: "Playlist",
  data() {
    return {
      // songsdata: [],
    };
  },
  mounted() {
    // this.songsdata = this.singinglist
  },
  computed: {
    //借助mapState生成计算属性，当前播放列表数据
    ...mapState("songAbout", ["singinglist","index",]),
    songsdata(){
      this.singinglist.forEach(item => {
        item.dt = formatSeconds(item.dt)
      });
      return this.singinglist
    },
    listLength(){
      return this.singinglist.length
    }
  },
  methods: {
    play(index) {
      //双击取到要播放的歌曲id，添加到vuex中
      this.$store.dispatch("songAbout/playsongid", index);

      //改变播放状态 playing改为true
      this.$store.commit("songAbout/CHANGE", true);
    },
    setItem(index){
      var style = {};
      if(index == this.index){
        style.fontWeight = 'bold';
      }
      return style
    },

    clear(){
      this.$store.state.songAbout.singinglist = []
      this.$store.state.songAbout.index = -1
      this.$store.state.songAbout.playUrl = ""
      this.$store.state.songAbout.playing = false

      this.$bus.$emit("clearList")
    }
  },
};
</script>

<style scoped>
#playlist {
  position: fixed;
  right: 0;
  top: 0;
  width: 400px;
  height: 100%;
  overflow: auto;
  padding: 60px 0px 80px;
  box-sizing: border-box;
  box-shadow: 0px 0px 5px #aaa;
  background: #fff;
  z-index: 14;
}
#playlist .title {
  height: 80px;
  line-height: 30px;
  text-align: left;
  border-bottom: 1px solid #eee;
}
#playlist .bigtitle {
  font-size: 20px;
  font-weight: 600;
  height: 50px;
  line-height: 60px;
  padding-left: 15px;
  position: relative;
}
#playlist .title span {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #555;
  position: absolute;
}
#playlist .title .total {
  left: 20px;
}
#playlist .title .clear {
  right: 10px;
  color: rgb(71, 69, 212);
}
#playlist .songlist {
}
#playlist .songlist li {
  height: 30px;
  line-height: 30px;
}
#playlist .songlist li span {
  font-size: 13px;
  display: inline-block;
  text-align: left;
  color: #555;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
}
#playlist .songlist li span:nth-child(1) {
  width: 150px;
  padding: 0 30px 0 20px;
}
#playlist .songlist li span:nth-child(2) {
  width: 140px;
}
#playlist .songlist li span:nth-child(3) {
  width: 60px;
  font-size: 10px;
  color: #ccc;
}
#playlist .songlist li:nth-of-type(even) {
  background: #fcfcfc;
}
#playlist .songlist li:hover {
  background: #fafafa;
}
#playlist .songlist li:hover span {
  color: #333;
}
.list_bor {
  color: #1aa;
}
</style>